import React from 'react'
import PropTypes from 'prop-types'
import { Modal, Table } from 'antd'
import classnames from 'classnames'
import { DropOption } from 'components'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import moment from 'moment'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'
import { routerRedux } from 'dva/router'

const confirm = Modal.confirm

const List = ({ goConfigItem, onDeleteItem, onEditItem, isMotion, location, ...tableProps }) => {
  location.query = queryString.parse(location.search)

  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      onEditItem(record)
    } else if (e.key === '2') {
      goConfigItem(record)
    }
  }

  const columns = [
    {
      title: '租户ID',
      dataIndex: 'systemCode',
      key: 'systemCode',
    }, {
      title: '流程定义ID',
      dataIndex: 'procDefId',
      key: 'procDefId',
    }, {
      title: '流程定义KEY',
      dataIndex: 'procDefKey',
      key: 'procDefKey',
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (record) => {
        if (record === null) {
          return ''
        }
        return moment(record).format('YYYY-MM-DD HH:mm:ss')
      },
    }, {
      title: '操作',
      key: 'operation',
      width: 60,
      render: (text, record) => {
        // return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '查看流程图' }, { key: '2', name: '删除' }]} />
        return (<DropOption onMenuClick={e => handleMenuClick(record, e)}
          menuOptions={[{ key: '1', name: '查看流程图' }]}
        />)
      },
    },
  ]

  const getBodyWrapperProps = {
    page: location.query.page,
    current: tableProps.pagination.current,
  }

  const getBodyWrapper = (body) => {
    return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body
  }

  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true, [styles.motion]: isMotion })}
        bordered
        scroll={{ y: 200 }}
        columns={columns}
        size="small"
        rowKey={record => record.id}
        getBodyWrapper={getBodyWrapper}
      />
    </div>
  )
}

List.propTypes = {
  goConfigItem: PropTypes.func,
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
